<template>
  <div class="itxst">
    <div class="col">
      <div class="title">todo</div>
      <draggable
        v-model="arr1"
        id="todo"
        group="site"
        animation="300"
        dragClass="dragClass"
        ghostClass="ghostClass"
        chosenClass="chosenClass"
        @add="onMove"

      >
        <transition-group tag="div" class="line_hig" id="todo">
          <div class="item" v-for="(item, index) in arr1" :key="item.id" @click="todo(index)">
            {{ item.name }}
          </div>
        </transition-group>
      </draggable>
    </div>
    <div class="col">
      <div class="title">doing</div>
      <draggable
        v-model="arr2"
        group="site"
        animation="100"
        dragClass="dragClass"
        ghostClass="ghostClass"
        chosenClass="chosenClass"
        @add="onMove"

      >
        <transition-group tag="div" class="line_hig" id="doing">
          <div class="item" v-for="(item, index) in arr2" :key="item.id" @click="doing(index)">
            {{ item.name }}
          </div>
        </transition-group>
      </draggable>
    </div>
    <div class="col">
      <div class="title">done</div>
      <draggable
        v-model="arr3"
        group="site"
        animation="100"
        tag="div"
        dragClass="dragClass"
        ghostClass="ghostClass"
        chosenClass="chosenClass"
        @add="onMove"
      >
      <!-- tag="div"        把容器盒子转换成块级元素DIV -->
        <transition-group tag="div" class="line_hig" id="done">
          <div class="item" v-for="(item, index) in arr3" :key="item.id" @click="done(index)">
            {{ item.name }}
          </div>
        </transition-group>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      arr1: [
        { id: 1, name: "www.itxst.com" },
        { id: 2, name: "www.jd.com" },
        { id: 3, name: "www.baidu.com" },
        { id: 4, name: "www.taobao.com" },
      ],
      arr2: [
        { id: 8, name: "www.google.com" },
        { id: 5, name: "www.msn.com" },
        { id: 6, name: "www.ebay.com" },
        { id: 7, name: "www.yahoo.com" },
      ],
      arr3: [
        { id: 11, name: "11111111" },
        { id: 22, name: "22222222" },
        { id: 33, name: "33333333"},
        { id: 44, name: "4444444444" },
      ],
    };
  },
  methods: {
    onMove(e) {
      this.$message({
          type:'success',
          message:`${e.from.id}移动到${e.to.id}`
      })
    },
    add(e) {
      console.log(e.clone.innerText);
    },
    // 无意义 只是为了防止key未使用报错
    todo(a){console.log(a)},
    doing(b){console.log(b)},
    done(c){console.log(c)}
  },
};
</script>

<style scoped>
.dragClass {
  /* background-color: blueviolet !important; */
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}

.itxst {
  margin: 10px;
}

.title {
  padding: 6px 12px;
  font-weight: bold;
}
.ghost-style {
  display: block;
  color: transparent;
  border-style: dashed;
}
.col {
  width: 30%;
  flex: 1;
  padding: 10px;
  border: solid 1px #eee;
  border-radius: 5px;
  float: left;
  background: #fff;
  min-height: 400px;
}

.col + .col {
  margin-left: 10px;
}
.item {
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border: solid 1px gray;
  background-color: #f1f1f1;
  border-radius: 5px;
}

.item:hover {
  border-color: royalblue;
  cursor: move;
}

.item + .item {
  /* border-top: none; */
  margin-top: 6px;
}
.line_hig {
  height: 400px;
  overflow-y: auto;
}
.line_hig::-webkit-scrollbar {
  width: 0;
}
</style>